<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form学习</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/reg.css">
</head>

<body>
    <div class="reg-main">

        <div class="reg-header">
            <h2>
                注册
            </h2>
        </div>


        <div class="reg-form">

            <div class="form-item haserror">
                <input type="text" placeholder="昵称">
                <div class="error">昵称已被使用</div>
            </div>

            <div class="form-item">
                <input type="password" placeholder="密码(6-16个字符组成，区分大小写)">
                <div class="error">密码不能使用</div>
            </div>

            <div class="form-item ">
                <div class="select">

                    <div class="select-titel">中国大陆</div>

                    <div class="select-item">
                        <ul>
                            <li>Lorem.</li>
                            <li>Placeatdddddddsssdddddddddddd</li>
                            <li class="selected">Lorem.</li>
                            <li>Cumque!</li>
                            <li>Tempora?</li>
                            <li>Qui!</li>
                            <li>Ab!</li>
                            <li>Ipsam.</li>
                            <li>Officia.</li>
                            <li>Maxime!</li>
                            <li>Atque?</li>
                            <li>Perferendis.</li>
                            <li>Maiores.</li>
                            <li>Exercitationem.</li>
                            <li>Corporis.</li>
                            <li>Expedita?</li>
                            <li>Rerum.</li>
                            <li>Aliquam.</li>
                            <li>Distinctio.</li>
                            <li>Sequi!</li>
                            <li>Debitis.</li>
                            <li>Ducimus.</li>
                            <li>Molestiae!</li>
                            <li>Voluptatem?</li>
                            <li>Vitae.</li>
                            <li>Reiciendis?</li>
                            <li>Illum!</li>
                            <li>A.</li>
                            <li>Ratione.</li>
                            <li>Neque!</li>
                            <li>Quidem?</li>
                            <li>Quidem.</li>
                            <li>Hic!</li>
                            <li>Maiores.</li>
                            <li>Officia.</li>
                            <li>Vel.</li>
                            <li>Pariatur.</li>
                            <li>Illum?</li>
                            <li>Quisquam?</li>
                            <li>Ab.</li>
                            <li>Sint?</li>
                            <li>Cum.</li>
                            <li>Beatae?</li>
                            <li>Officiis?</li>
                            <li>Deleniti.</li>
                            <li>Consectetur.</li>
                            <li>Similique.</li>
                            <li>Quisquam!</li>
                            <li>Maiores.</li>
                            <li>Cum!</li>
                            <li>Harum.</li>
                            <li>Dolor?</li>
                            <li>Vero?</li>
                            <li>Eaque.</li>
                            <li>Amet?</li>
                            <li>Placeat!</li>
                            <li>Rem?</li>
                            <li>Accusamus!</li>
                            <li>Repellendus!</li>
                            <li>Voluptatibus?</li>
                            <li>Magni.</li>
                            <li>Molestiae?</li>
                            <li>Voluptates?</li>
                            <li>Hic!</li>
                            <li>Quod.</li>
                            <li>Nisi.</li>
                            <li>Vero!</li>
                            <li>Minus.</li>
                            <li>Eum?</li>
                            <li>Ducimus.</li>
                            <li>Repudiandae.</li>
                            <li>Nemo!</li>
                            <li>Neque.</li>
                            <li>Labore!</li>
                            <li>Consequatur!</li>
                            <li>Officiis?</li>
                            <li>Consequuntur.</li>
                            <li>Quaerat.</li>
                            <li>Soluta.</li>
                            <li>Velit!</li>
                            <li>Aspernatur!</li>
                            <li>Nobis.</li>
                            <li>Magnam.</li>
                            <li>Mollitia!</li>
                            <li>Explicabo.</li>
                            <li>Quas?</li>
                            <li>Enim!</li>
                            <li>Necessitatibus!</li>
                            <li>Perferendis!</li>
                            <li>Rem.</li>
                            <li>Quia.</li>
                            <li>Alias.</li>
                            <li>Facilis!</li>
                            <li>Sed!</li>
                            <li>Soluta.</li>
                            <li>Accusamus.</li>
                            <li>Iusto!</li>
                            <li>Molestias!</li>
                            <li>Repudiandae!</li>
                            <li>Veritatis.</li>
                            <li>Minima!</li>
                            <li>Eos!</li>
                        </ul>
                    </div>
                </div>
                <div class="input"><input type="text" placeholder="填写常用手机号"> </div>

            </div>

            <div class="reg-mail">
                <a href="">用邮箱注册&gt</a>
            </div>

            <div class="form-item">
                <div class="reg-talnt">
                    <input type="text" placeholder="请输入短信验证码 ">
                    <button type="botton" class="reg-ntcont">点击获取</button>
                </div>
            </div>

            <div class="readme">
                <label>
                    <input type="checkbox">
                    <span></span>
                    我已同意 <a href="">###########</a>和
                    <a href="">*********************</a>
                </label>
            </div>

            <div class="form-item">
                <button type="botton" disabled>注册</button>
            </div>

            <div class="log">
                <a href="">已有账号，前去登录&gt</a>
            </div>

        </div>

    </div>



</body>

</html>